<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="fontface.css">
    <script src="js/rem.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap .search div:nth-child(1) span{
            font-family: "icomoon";
            font-size: 0.25rem;
            line-height: 0.3rem;
            color: #f83342;  
        }
        .wrap{
            width: 7.5rem;
            height: 28.21rem;
            margin: 0 auto;
        }
        .wrap .search{
            height: 1rem;
            display: flex;
        }
        .wrap .search div:nth-child(1){
            width: 1.45rem;
            text-align: center;
            line-height: 1rem;
            font-size: 0.2rem;
      
        }
        .wrap .search div:nth-child(2){
            width: 1.45rem;
            flex: 1;
        }
        .wrap .search div:nth-child(3){
            width: 1.05rem;
        }
        .wrap .search input{
            width: 4.97rem;
            height: 0.56rem;
            background-color: #f1f4f6;
            border-radius: 0.1rem;
            border: 0rem;
            margin-top: 0.22rem;
        }
        .wrap .search div:nth-child(3) span{
            font-family: "icomoon";
            font-size: 0.4rem;
            line-height: 1rem;
            text-align: center;
            display: block;
        }
        .wrap .search div:nth-child(2) input{
            font-family: "icomoon";
            font-size: 0.25rem;
            line-height: 1rem;
            
            display: block;
        }
        .banner img{
            width: 7.5rem;
            height: 2.76rem;
            vertical-align: middle;
        }
        .wrap .ten{
            width: 7.5rem;
            height: 3rem;
            display: flex;
            flex-wrap: wrap;
        }
        .wrap .ten div{
            display: inline-block;
            width: 1.5rem;
            height: 1.5rem;
            text-align: center;
            font-size: 0.23rem;
        }
        .wrap .ten div img{
            width: 0.8rem;
            height: 0.8rem;
            display: block;
            margin: 0.28rem 0.35rem 0.14rem 0.35rem;

        }
        .wrap .ten div .rice{
            width: 1.05rem;
            height: 0.8rem;
            display: block;
            margin: 0.28rem 0.1rem 0.14rem 0.35rem;
        }
        .wrap .ten span{
            display: block;
            width: 1.3rem;
            height: 0.06rem;
            background-color: #fecdd0;
            border-radius: 0.03rem;
            margin: 0.3rem auto;
            background: linear-gradient(red 40%);
        }
        .bar{
            width: 1.31rem;
            height: 0.06rem;
            border-radius: 0.03rem;
           background-color: #fecdd0;
            margin: 0.3rem auto;
        }
        .bar_in{
            width: 50%;
            height: 100%;
            background-color: red;
            border-radius: 0.03rem;
        }
        .global {
            width: 7.5rem;
            display: flex;
            height: 1.1rem;
            justify-content: space-between;
        }
        .global span{
            font-family: "icomoon";
            font-size: 0.25rem;
            line-height: 0.3rem; 
        }
        .global div:nth-child(1){
            width: 1.7rem;
            height: 1.1rem;
            line-height: 1.1rem;
            font-size: 0.38rem;
        }
        .global div:nth-child(2){
            width: 1.7rem;
            height: 1.1rem;
            line-height: 1.1rem;
            font-size: 0.26rem;
            color: #989898;
        }
        .pic{
            display: flex;
            width: 7.5rem;
            justify-content: space-between;
            margin-top: 0.45rem;
        }
        .pic div:nth-child(1){
            width: 4rem;
            height: 3.58rem;
        }
        .pic div:nth-child(2){
            width: 2.68rem;
            height: 3.58rem;
        }
        .pic img{
            width: 100%;
            height: 100%;
        }
        .address{
            width: 7.5rem;
            height: 1.6rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 0.13rem;
        }
        .address div{
            width: 1.65rem;
            height: 0.66rem;
            background-color: #eafbfe;
            border-radius: 0.33rem;
            text-align: center;
            line-height: 0.66rem;
            font-size: 0.25rem;
            color: #566166;
        }
        .address span{
            font-family: "icomoon";
            font-size: 0.25rem;
            line-height: 0.66rem; 
        }
        .wedding {
            width: 7.5rem;
            display: flex;
            height: 1.1rem;
            justify-content: space-between;
        }
        .wedding span{
            font-family: "icomoon";
            font-size: 0.25rem;
            line-height: 0.3rem; 
        }
        .wedding div:nth-child(1){
            width: 1.7rem;
            height: 1.1rem;
            line-height: 1.1rem;
            font-size: 0.38rem;
        }
        .wedding div:nth-child(2){
            width: 0.8rem;
            height: 1.1rem;
            line-height: 1.1rem;
            font-size: 0.26rem;
            color: #989898;
        }
        .card{
            width: 7.5rem;
            height: 1.8rem;
            display: flex;
        }
        .card div{
            display: inline-block;
            width: 1.5rem;
            height: 1.5rem;
            text-align: center;
            font-size: 0.23rem;
        }
        .card div img{
            width: 0.5rem;
            height: 0.5rem;
            display: block;
            margin: 0.24rem 0.5rem 0.24rem 0.5rem;
          
        }
        .selection {
            width: 7.5rem;
            height: 1.1rem;
            margin-bottom: 0.44rem;
        }
        .selection div{
            width: 1.7rem;
            height: 1.1rem;
            line-height: 1.1rem;
            font-size: 0.38rem;
        }
        .activity{
            width: 7.5rem;
            height: 6.5rem;
            margin-bottom: 0.48rem;
        }
        .activity .bord{
            width: 7.5rem;
            height: 6.44rem;
            background-color: #ac8d9a;
            border-radius: 0.35rem;
            margin: auto;
        }
        .activity .bord .slogan{
            margin-left: 0.28rem;
            font-size: 0.35rem;
            color: #fffeff;
            line-height: 0.6rem;
        }
        .activity .bord img{
            width: 100%;
           height: 3.85rem;
        }
        .activity .bord .slogan button{
            width: 0.5rem;
            height: 0.3rem;
            border: 0.02rem solid #c5afb9;
            border-radius: 0.1rem;
            background-color: #ac8d9a;
            color: #c5afb9;
            vertical-align: middle;
        }
        .activity .bord .garden{
            color: #eee8ea;
            font-size: 0.28rem;
            margin-left: 0.28rem;
        }
        .activity .combo{
            width: 6.88rem;
            height: 0.84rem;
            margin:0.3rem 0.25rem;
            display: flex;
            justify-content: space-between;
        }
        .activity .combo div{
            width: 3.14rem;
            height: 0.82rem;
            background-color: #ffffff;
            border-radius: 0.41rem;
            font-size: 0.28rem;
            line-height: 0.82rem;
            text-align: center;
            
        }
        .footer{
            width: 7.5rem;
            height: 1rem;
        }
        .footer span{
            font-family: "icomoon";
            font-size: 0.4rem;
            line-height: 0.3rem; 
           margin-top: 0.2rem;
           display: block;
        }
        .footer div:nth-child(1){
            width: 7.5rem;
            height: 0.6rem;
            display: flex;
            justify-content: space-around;

            
        }
        .footer div:nth-child(2){
            width: 7.5rem;
            height: 0.4rem;
            display: flex;
            justify-content: space-around;
        }
        .footer div:nth-child(2) a{
            text-decoration: none;
            font-size: 0.18rem;
            color: #929292;
            line-height: 0.4rem;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <!-- /* 顶部搜索 */ -->
        <div class="search">
            <div>
                <span></span>北京
            </div>
            <div>
                <input type="text" placeholder="  想找的搜出来～">
            </div>
            <div>
                <span></span>
            </div>
        </div>
        <!-- /* 轮播 */ -->
        <div class="banner">
            <img src="img/首页_03.jpg" alt="">
        </div>
        <!-- /* 十小点 */ -->
        <div class="ten">
            <div><img src="img/首页_07.jpg" alt="">找商家</div>
            <div><img src="img/首页_09.jpg" alt="">婚纱摄影</div>
            <div><img src="img/首页_11.jpg" alt="">婚礼策划</div>
            <div><img src="img/首页_13.jpg" alt="" class="rice">订婚宴</div>
            <div><img src="img/首页_15.jpg" alt="">租婚车</div>
            <div><img src="img/首页_22.jpg" alt="">看案例</div>
            <div><img src="img/首页_24.jpg" alt="">短途旅拍</div>
            <div><img src="img/首页_25.jpg" alt="">婚纱礼服</div>
            <div><img src="img/首页_26.jpg" alt="">跟妆</div>
            <div><img src="img/首页_27.jpg" alt="">海岛婚礼</div>
            
        </div>
        <!-- 进度条 -->
        <div class="bar">
            <div class="bar_in"></div>
        </div>
        <!-- 全球旅拍 -->
        <div class="global">
            <div>全球旅拍</div>
            <div>更多目的地<span></span></div>
        </div>
        <!-- /* 目的地 */ -->
        <div class="pic">
            <div><img src="img/首页_34.jpg" alt=""></div>
            <div><img src="img/首页_36.jpg" alt=""></div>
        </div>
        <!-- /* 目的地地址 */ -->
        <div class="address">
            <div>三亚</div>
            <div>青岛</div>
            <div>厦门</div>
            <div>丽江</div>
            <div>大理</div>
            <div>大连</div>
            <div>巴厘岛</div>
            <div>更多<span></span></div>
        </div>
        <!-- /* 备婚工具 */ -->
        <div class="wedding">
            <div>备婚工具</div>
            <div>更多<span></span></div>
        </div>
        <!-- 电子请帖 -->
        <div class="card">
            <div><img src="img/首页_40.jpg" alt="">电子请帖</div>
            <div><img src="img/首页_42.jpg" alt="">婚礼墙</div>
            <div><img src="img/首页_44.jpg" alt="">直播特卖</div>
            <div><img src="img/首页_47.jpg" alt="">新婚贷</div>
            <div><img src="img/首页_49.jpg" alt="">黄道吉日</div>
        </div>
        <!-- /* 为你精选 */ -->
        <div class="selection">
            <div>为您精选</div>
        </div>
        <!-- 人气活动 -->
        <div class="activity">
            <div class="bord">
                <img src="img/首页_57.jpg" alt="">
                <div class="slogan"><button>广告</button>&nbsp;不想改变 这样就是最好的时光</div>
                <div class="garden">三里屯洲际【她的花园】</div>
                <div class="combo">
                    <div>人气活动</div>
                    <div>明星套餐</div>
                </div>
            </div>
        </div>
        <!-- 底部照片 -->
        <div class="banner">
            <img src="img/首页_60.jpg" alt="">
        </div>
        <!-- /* 页脚 */ -->
        <div class="footer">
            <div>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            
            </div>
            <div>
                <a href="#">首页</a>
            <a href="#">新娘说</a>
            <a href="#">婚品11.11</a>
            <a href="#">收藏</a>
            <a href="#">我们</a>
            </div>
        </div>
   
</body>
</html>